<template>
  <div class="table-header-container">
    <div class="corner-cell" @mousedown="handleCornerMouseDown($event)"></div>
    <div class="column-headers" :style="{ transform: `translateX(${-headerScrollLeft}px)` }">
      <div
        v-for="(col, colIndex) in columns"
        :key="colIndex"
        class="column-header"
        :class="{ selected: isColumnSelected(colIndex) }"
        :style="{ width: getColumnWidth(colIndex) + 'px' }"
        @contextmenu="$emit('handleColumnMenu', $event, colIndex)"
      >
        {{ col.name }}
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { Column } from '../types';

// 定义组件的属性
const props = defineProps<{
  columns: Column[];
  headerScrollLeft: number;
  selectedCells: Set<string>;
  columnWidths: number[];
  tableData: any[][];
}>();

// 定义组件的事件
const emit = defineEmits<{
  (e: 'cornerMouseDown'): void;
  (e: 'columnSelect', colIndex: number): void;
  (e: 'handleColumnMenu', event: MouseEvent, colIndex: number): void;
}>();

// 列宽度计算
const getColumnWidth = (colIndex: number): number => {
  return props.columnWidths[colIndex] || 100; // 默认100px
};

// 判断列是否被选中
const isColumnSelected = (colIndex: number): boolean => {
  for (let row = 0; row < props.tableData.length; row++) {
    const cellId = `${row}-${colIndex}`;
    if (!props.selectedCells.has(cellId)) return false;
  }
  return true;
};

// 处理角落单元格鼠标按下事件
const handleCornerMouseDown = (event: MouseEvent) => {
  event.preventDefault();
  emit('cornerMouseDown', event);
};
const handleColumnContextMenu = (event: MouseEvent, colIndex: number) => {
  event.preventDefault();
  emit('handleColumnMenu', event, colIndex); // 发送事件到父组件
};
</script>

<style scoped>
.table-header-container {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  z-index: 30;
  background-color: #fff;
}

.corner-cell {
  width: 40px;
  height: 30px;
  background-color: #f0f0f0;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  cursor: pointer;
  position: sticky;
  top: 0;
  left: 0;
  z-index: 20;
  flex-shrink: 0;
}

.corner-cell:hover {
  background-color: #e0e0e0;
}

.column-headers {
  display: flex;
  flex: 1;
}

.column-header {
  height: 30px;
  background-color: #f0f0f0;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  padding: 0 5px;
  text-align: center;
  font-weight: 600;
  cursor: pointer;
  position: relative;
  display: flex;
  font-size: 14px;
  align-items: center;
  justify-content: center;
}

.column-header:last-child {
  border-right: none;
}

.column-header:hover {
  background-color: #e0e0e0;
}

.column-header.selected {
  background-color: #cce7ff;
}

/* 滚动条样式优化 */
.column-headers::-webkit-scrollbar {
  height: 8px;
}

.column-headers::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

.column-headers::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 4px;
}

.column-headers::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* Firefox 滚动条样式 */
.column-headers {
  scrollbar-width: thin;
  scrollbar-color: #c1c1c1 #f1f1f1;
}
</style>
